<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function createrange() {
    var range1 = document.createRange();
    var p= document.getElementsByTagName("p")[0];
	var text = p.firstChild;
    range1.setStart(text, 24);
    range1.setEnd(text, 36);
	var span = document.createElement("span");
	span.style.color = "red";
	span.style.fontWeight = "bold";
    range1.surroundContents(span);

}
</script>
</head>

<body>
<section id="wrap">
    <article id="main">
        <h1>游子吟</h1>
        <h2>孟郊</h2>
        <p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。</p>
    </article>
    <header>
        <input type="button" value="高亮显示范围内容" onclick="createrange()" />
    </header>
</section>
</body>
</html>
